<template>
  <!-- <router-link to="/tration">注册</router-link> -->
  <!-- <router-link to="/ceshi">测试</router-link> -->
  <div class="box">
    <!-- 头部 -->
    <div class="header">
      <div class="logo">
        <router-link to="/login">
          <span class="iconfont iconnew"></span>
        </router-link>
      </div>
      <div class="shousuo">
        <span class="iconfont iconsearch">&nbsp;你想要啥?还在想!滚!</span>
      </div>

      <div class="iticonfont">
        <router-link to="/personal">
          <span class="iconfont iconwode"></span>
        </router-link>
      </div>
    </div>
    <!-- tad栏 -->
    <van-tabs v-model="active" class="nav">
      <van-tab v-for="item in tablist" :key="item.id" :title="item.name">
        <articles :article="post" v-for="post in postlist" :key="post.id" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import articles from "@/components/Articles";
export default {
  components: {
    articles
  },
  data() {
    return {
      active: 0,
      tablist: [],
      postlist: []
    };
  },
  // computed: {
  //   getcategory() {
  //     const current = this.tablist[this.active];
  //     console.log(current.id);
  //     return current.id;
  //   }
  // },

  created() {
    this.$axios({
      url: "/category"
    }).then(res => {
      // console.log(res.data);
      this.tablist = res.data.data;
      // console.log(this.tablist);
      this.getpos();
    });
  },
  watch: {
    active() {
      this.getpos();
    }
  },
  methods: {
    getpos(getcategory) {
      const current = this.tablist[this.active];
      const cate = current.id;
      this.$axios({
        url: "/post",
        params: {
          category: cate
        }
      }).then(res => {
        const { data } = res.data;
        console.log(data);
        this.postlist = data;
      });
    }
  }
};
</script>
<style lang="less">
body {
  color: aliceblue;
  background-image: url("../assets/123.jpg");
  background-size: 100%;
}
@import url("http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css");
input {
  outline: none;
}
</style>

<style lang="less" scoped>
.box {
  .header {
    padding: 0px 15px;
    height: 60px;
    align-items: center;
    background: violet;
    opacity: 0.9;
    display: flex;
    line-height: 60px;
    .logo {
      margin-top: 10px;
      .iconnew {
        font-size: 60px;
        background-image: -webkit-linear-gradient(
          bottom,
          rgb(211, 7, 7),
          #d4b3f3,
          rgb(66, 202, 193)
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        opacity: 1;
      }
    }
    .shousuo {
      flex: 1;
      margin: 0 15px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      background: pink;
      border-radius: 50px;
      opacity: 1;
      // color: white;
    }
    .iticonfont {
      .iconwode {
        font-size: 25px;
        color: white;
      }
    }
  }
  .nav {
    opacity: 0.9;
  }
}
</style>